// src/routes/index.tsx
import React, { lazy, Suspense, FC } from "react";
import { useRoutes, Navigate } from "react-router-dom";
import { HomeOutlined, ShopOutlined ,GiftOutlined} from "@ant-design/icons";
import type { SRoutes } from "./types";

import {
  Layout,
  EmptyLayout,
  // CompLayout
} from "../layouts";
import Loading from "@comps/Loading";

import Translation from "@comps/Translation";

const Login = lazy(() => import("@pages/login"));
const Dashboard = lazy(() => import("@pages/dashboard"));
const NotFound = lazy(() => import("@pages/404"));

// 1. 懒加载的方式引入组件
const HospitalSet = lazy(() => import("@pages/hospital/hospitalSet"))
const HospitalList = lazy(() => import("@pages/hospital/hospitalList"))
const AddOrUpdateHospital = lazy(() => import('@pages/hospital/hospitalSet/components/AddOrUpdateHospital'))
const HospitalDetail = lazy(() => import('@pages/hospital/hospitalList/components/HospitalDetail'))
const HospitalSchedule = lazy(() => import('@pages/hospital/hospitalList/components/HospitalSchedule'))
const Attr = lazy(()=> import('@pages/product/attr/index'))
const Trademark = lazy(()=> import('@/pages/product/trademark/index'))


const load = (Comp: FC) => {
  return (
    // 因为路由懒加载，组件需要一段网络请求时间才能加载并渲染
    // 在组件还未渲染时，fallback就生效，来渲染一个加载进度条效果
    // 当组件渲染完成时，fallback就失效了
    <Suspense fallback={<Loading />}>
      {/* 所有lazy的组件必须包裹Suspense组件，才能实现功能 */}
      <Comp />
    </Suspense>
  );
};

const routes: SRoutes = [
  {
    path: "/",
    element: <EmptyLayout />,
    children: [
      {
        path: "login",
        element: load(Login),
      },
    ],
  },
  {
    path: "/syt",
    element: <Layout />,
    children: [
      {
        path: "/syt/dashboard",
        meta: { icon: <HomeOutlined />, title: <Translation>route:dashboard</Translation> },
        element: load(Dashboard),
      },

      // 医院管理
      {
        path: "/syt/hospital",
        meta: { 
          icon: <ShopOutlined /> ,
          title: '医院管理'
        },
        // 为了同一级菜单方便管理
        children: [
          // 医院设置
          {
            path: '/syt/hospital/hospitalset',
            meta: {
              title: '医院设置'
            },
            // 懒加载的方式
            element: load(HospitalSet)
          },
          // 医院列表
          {
            path: '/syt/hospital/hospitallist',
            meta: {
              title: '医院列表'
            },
            // 懒加载的方式
            element: load(HospitalList)
          },
          // 医院添加
          {
            // path: '/syt/hospital/hospitalset/add',
            path: '/syt/hospital/add',
            meta: { title: '添加医院' },
            // 在侧边栏，隐藏该菜单
            hidden: true,
            element: load(AddOrUpdateHospital)
          },
          // 编辑医院
          {
            // path: '/syt/hospital/hospitalset/edit',
            path: '/syt/hospital/edit/:id',
            meta: { title: '编辑医院' },
            // 在侧边栏，隐藏该菜单
            hidden: true,
            element: load(AddOrUpdateHospital)
          },
          // 显示医院详情
          {
            path: '/syt/hospital/detail/:id',
            meta: { title: '医院详情' },
            element: load(HospitalDetail),
            hidden: true
          },
          // 显示医院排班
          {
            path: '/syt/hospital/schedule/:id',
            meta: { title: '医院排班' },
            element: load(HospitalSchedule),
            hidden: true
          }
        ]
      },

      // 商品管理
      {
        path: "/syt/product",
        meta:{
          icon:<GiftOutlined />,
          title:'商品管理'
        },
        children:[
          {
            // 品牌管理
            path:'/syt/product/trademark',
            meta:{
              title:"品牌管理"
            },
            element:load(Trademark),
          },
          {
            // 品牌管理
            path:'/syt/product/attr',
            meta:{
              title:"平台属性管理"
            },
            element:load(Attr),
          },
        ]
      }
    ],
  },

  {
    path: "/404",
    element: load(NotFound),
  },
  {
    path: "*",
    element: <Navigate to="/404" />,
  },
];

/* 
自定义hook: 注册应用的所有路由
*/
export const useAppRoutes = () => {
  return useRoutes(routes);
};

// 找到要渲染成左侧菜单的路由
export const findSideBarRoutes = () => {
  const currentIndex = routes.findIndex((route) => route.path === "/syt");
  return routes[currentIndex].children as SRoutes;
};

export default routes;
